<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>Vue知识点 - ZzmHub Blog</title>
  <meta name="renderer" content="webkit" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>

<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />

<meta name="theme-color" content="#f8f5ec" />
<meta name="msapplication-navbutton-color" content="#f8f5ec">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="#f8f5ec">


<meta name="author" content="ZzmHub" /><meta name="description" content="Vue.use() 源码： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 Vue.use = function (plugin: Function | Object) { //Vue构造函数上定义_installedPlugin" /><meta name="keywords" content="Hugo, theme, even" />






<meta name="generator" content="Hugo 0.69.2 with theme even" />


<link rel="canonical" href="https://meilanziqing.gitee.io/zhi-blogs/post/vue/vue%E7%9F%A5%E8%AF%86%E7%82%B9/" />
<link rel="apple-touch-icon" sizes="180x180" href="/zhi-blogs/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/zhi-blogs/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/zhi-blogs/favicon-16x16.png">
<link rel="manifest" href="/zhi-blogs/manifest.json">
<link rel="mask-icon" href="/zhi-blogs/safari-pinned-tab.svg" color="#5bbad5">



<link href="/zhi-blogs/sass/main.min.4eb71590ad024de2ebb1b5eef94cbb645b7e63e6b9c4c837355530a75e112ce1.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.1.20/dist/jquery.fancybox.min.css" integrity="sha256-7TyXnr2YU040zfSP+rEcz29ggW4j56/ujTPwjMzyqFY=" crossorigin="anonymous">


<meta property="og:title" content="Vue知识点" />
<meta property="og:description" content="Vue.use() 源码： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 Vue.use = function (plugin: Function | Object) { //Vue构造函数上定义_installedPlugin" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://meilanziqing.gitee.io/zhi-blogs/post/vue/vue%E7%9F%A5%E8%AF%86%E7%82%B9/" />
<meta property="article:published_time" content="2020-06-30T13:59:25+08:00" />
<meta property="article:modified_time" content="2020-06-30T13:59:25+08:00" />
<meta itemprop="name" content="Vue知识点">
<meta itemprop="description" content="Vue.use() 源码： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 Vue.use = function (plugin: Function | Object) { //Vue构造函数上定义_installedPlugin">
<meta itemprop="datePublished" content="2020-06-30T13:59:25&#43;08:00" />
<meta itemprop="dateModified" content="2020-06-30T13:59:25&#43;08:00" />
<meta itemprop="wordCount" content="2879">



<meta itemprop="keywords" content="vue," /><meta name="twitter:card" content="summary"/>
<meta name="twitter:title" content="Vue知识点"/>
<meta name="twitter:description" content="Vue.use() 源码： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 Vue.use = function (plugin: Function | Object) { //Vue构造函数上定义_installedPlugin"/>

<!--[if lte IE 9]>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/classlist/1.1.20170427/classList.min.js"></script>
<![endif]-->

<!--[if lt IE 9]>
  <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
<![endif]-->

</head>
<body>
  <div id="mobile-navbar" class="mobile-navbar">
  <div class="mobile-header-logo">
    <a href="/zhi-blogs/" class="logo">ZzmHub</a>
  </div>
  <div class="mobile-navbar-icon">
    <span></span>
    <span></span>
    <span></span>
  </div>
</div>
<nav id="mobile-menu" class="mobile-menu slideout-menu">
  <ul class="mobile-menu-list">
    <a href="/zhi-blogs/">
        <li class="mobile-menu-item">首页</li>
      </a><a href="/zhi-blogs/post/">
        <li class="mobile-menu-item">归档</li>
      </a><a href="/zhi-blogs/categories/">
        <li class="mobile-menu-item">分类</li>
      </a><a href="/zhi-blogs/tags/">
        <li class="mobile-menu-item">标签</li>
      </a><a href="/zhi-blogs/about/">
        <li class="mobile-menu-item">关于</li>
      </a>
  </ul>
</nav>
  <div class="container" id="mobile-panel">
    <header id="header" class="header">
        <div class="logo-wrapper">
  <a href="/zhi-blogs/" class="logo">ZzmHub</a>
</div>

<nav class="site-navbar">
  <ul id="menu" class="menu">
    <li class="menu-item">
        <a class="menu-item-link" href="/zhi-blogs/">首页</a>
      </li><li class="menu-item">
        <a class="menu-item-link" href="/zhi-blogs/post/">归档</a>
      </li><li class="menu-item">
        <a class="menu-item-link" href="/zhi-blogs/categories/">分类</a>
      </li><li class="menu-item">
        <a class="menu-item-link" href="/zhi-blogs/tags/">标签</a>
      </li><li class="menu-item">
        <a class="menu-item-link" href="/zhi-blogs/about/">关于</a>
      </li>
  </ul>
</nav>
    </header>

    <main id="main" class="main">
      <div class="content-wrapper">
        <div id="content" class="content">
          <article class="post">
    
    <header class="post-header">
      <h1 class="post-title">Vue知识点</h1>

      <div class="post-meta">
        <span class="post-time"> 2020-06-30 </span>
        <div class="post-category">
            <a href="/zhi-blogs/categories/vue/"> vue </a>
            </div>
        
      </div>
    </header>

    <div class="post-toc" id="post-toc">
  <h2 class="post-toc-title">文章目录</h2>
  <div class="post-toc-content always-active">
    <nav id="TableOfContents">
  <ul>
    <li><a href="#vueuse">Vue.use()</a></li>
    <li><a href="#基本优化">基本优化</a>
      <ul>
        <li><a href="#v-showv-if">v-show、v-if</a></li>
        <li><a href="#v-for和v-if不要一起使用">v-for和v-if不要一起使用</a></li>
        <li><a href="#v-for-key避免使用index作为标识">v-for key避免使用index作为标识</a></li>
        <li><a href="#释放组件资源">释放组件资源</a></li>
      </ul>
    </li>
    <li><a href="#vue父子通信">vue父子通信</a>
      <ul>
        <li><a href="#tabbar案例">tabbar案例</a></li>
        <li><a href="#总结">总结</a></li>
      </ul>
    </li>
    <li><a href="#axios">axios</a></li>
    <li><a href="#rem">rem</a></li>
    <li><a href="#scss">scss</a></li>
    <li><a href="#插槽slot">插槽slot</a></li>
    <li><a href="#vue操作dom元素">vue操作DOM元素</a></li>
    <li><a href="#vue-router">vue-router</a></li>
    <li><a href="#vuex">vuex</a></li>
    <li><a href="#vue注意点">vue注意点</a>
      <ul>
        <li><a href="#v-if和v-show区别">v-if和v-show区别</a></li>
        <li><a href="#图片的引入">图片的引入</a></li>
      </ul>
    </li>
  </ul>
</nav>
  </div>
</div>
    <div class="post-content">
      <h2 id="vueuse">Vue.use()</h2>
<p>源码：</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span><span class="lnt">23
</span><span class="lnt">24
</span><span class="lnt">25
</span><span class="lnt">26
</span><span class="lnt">27
</span><span class="lnt">28
</span><span class="lnt">29
</span><span class="lnt">30
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-fallback" data-lang="fallback">Vue.use = function (plugin: Function | Object) {

  //Vue构造函数上定义_installedPlugins 避免相同的插件注册多次
  const installedPlugins = (this._installedPlugins || (this._installedPlugins = []))

  // import是单例模式
  //所以plugin不论是Fuction还是Object同一个插件都是同一个
  if (installedPlugins.indexOf(plugin) &gt; -1) {
   return this
  }

  // additional parameters
  const args = toArray(arguments, 1)

  // Vue作为第一个参数传递给插件
  args.unshift(this)

  if (typeof plugin.install === &#39;function&#39;) {

   plugin.install.apply(plugin, args)

  } else if (typeof plugin === &#39;function&#39;) {

   plugin.apply(null, args)

  }

  installedPlugins.push(plugin)
  return this // 返回的是this,可以链式调用
 }
</code></pre></td></tr></table>
</div>
</div><p>通常在组件内使用一个插件都会先</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-fallback" data-lang="fallback">import Vue from &#39;vue&#39;
import Element from &#39;element-ui&#39;
Vue.use(Element)  
new Vue({})
</code></pre></td></tr></table>
</div>
</div><p>为什么要使用Vue.use(组件)？<br>
因为引入一个组件首先要初始化插件，而为Vue定制的插件里都会暴露一个 <code>install</code> 方法<br>
Vue.use()就是要运行这个 <code>install</code>
演示如何用Vue.use初始化插件:</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span><span class="lnt">7
</span><span class="lnt">8
</span><span class="lnt">9
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-fallback" data-lang="fallback">// 插件
const plugin = {
  install(){
	document.write(&#39;我是install内的代码&#39;)
  }
}

// 初始化插件
Vue.use(plugin); // 页面显示&#34;我是install内的代码&#34;
</code></pre></td></tr></table>
</div>
</div><ul>
<li>Vue的插件是一个对象, 就像Element.</li>
<li>插件对象必须有install字段.</li>
<li>install字段是一个函数.</li>
<li>初始化插件对象需要通过Vue.use().<br>
<strong>注意</strong> <code>Vue.use()调用必须在new Vue之前</code></li>
</ul>
<p><strong>Vue.use()、Vue.prototype.$xx的区别</strong></p>
<p>一个是封装vue插件写法，一个直接挂载拿来即用<br>
作为插件的install方法里面其实是封装了若干对象的</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-fallback" data-lang="fallback">Vue.prototype.$loading = Loading.service;
Vue.prototype.$msgbox = MessageBox;
Vue.prototype.$alert = MessageBox.alert;
···
</code></pre></td></tr></table>
</div>
</div><p>Vue.prototype.$xx<br>
将$xxx通过定义在Vue.prototype上 实现成为 函数原型上的属性/方法, 在函数实例化后, 可以在任意实例上读取</p>
<p>axios 不是给Vue定制的方法，里面没有install方法，所以挂载的时候这样</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-fallback" data-lang="fallback">const vp = Vue.prototype;
// axios.defaults.withCredentials = true
vp.$http = axios;
</code></pre></td></tr></table>
</div>
</div><p><a href="https://www.jb51.net/article/168434.htm">参考链接</a></p>
<h2 id="基本优化">基本优化</h2>
<p><a href="https://juejin.im/post/5f0f1a045188252e415f642c">参考文章</a></p>
<h3 id="v-showv-if">v-show、v-if</h3>
<ul>
<li>v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。</li>
<li>v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。</li>
<li>相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。</li>
<li>一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。</li>
</ul>
<p><strong>性能</strong><br>
如果要频繁切换某节点时，使用v-show（无论true或者false初始都会进行渲染，此后通过css来控制显示隐藏，因此切换开销比较小，初始开销较大），<br>
如果不需要频繁切换某节点时，使用v-if（因为懒加载，初始为false时，不会渲染，但是因为它是通过添加和删除dom元素来控制显示和隐藏的，因此<code>初始渲染开销较小</code>，切换开销比较大）</p>
<h3 id="v-for和v-if不要一起使用">v-for和v-if不要一起使用</h3>
<p>vFor 的优先级其实是比 vIF 高的，所以当两个指令出现来一个DOM中，那么 vFor 渲染的当前列表，每一次都需要进行一次 vIf 的判断。而相应的列表也会重新变化，这个看起来是非常不合理的。因此当你需要进行同步指令的时候。尽量使用计算属性，先将 vIf 不需要的值先过滤掉。他看起像是下面这样的。</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span><span class="lnt">7
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-fallback" data-lang="fallback">// 计算属性
computed: {
  filterList: function () {
  return this.showData.filter(function (data) {
    return data.isShow
  })
}
</code></pre></td></tr></table>
</div>
</div><div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-fallback" data-lang="fallback">// DOM  
&lt;ul&gt;
  &lt;li v-for=&#34;item in filterList&#34; :key=&#34;item.id&#34;&gt;
  {{ item.name }}
  &lt;/li&gt;
&lt;/ul&gt;
</code></pre></td></tr></table>
</div>
</div><p><!-- raw HTML omitted -->  <!-- raw HTML omitted --></p>
<h3 id="v-for-key避免使用index作为标识">v-for key避免使用index作为标识</h3>
<p>其实大家都知道 vFor 是不推荐使用 index 下标来作为 key 的值，这是一个非常好理解的知识点，可以从图中看到，当index作为标识的时候，插入一条数据的时候，列表中它后面的key都发生了变化，那么当前的 vFor 都会对key变化的 Element 重新渲染，但是其实它们除了插入的 Element 数据都没有发生改变，这就导致了没有必要的开销。所以，尽量不要用index作为标识，而去采用数据中的唯一值，如 <code>id</code> 等字段。</p>
<p><!-- raw HTML omitted -->  <!-- raw HTML omitted --></p>
<h3 id="释放组件资源">释放组件资源</h3>
<p>什么是资源? 每创建出一个事物都需要消耗资源，资源不是凭空产生的，是分配出来的。所以说，当组件销毁后，尽量把我们开辟出来的资源块给销毁掉，比如 setInterval , addEventListener等，如果你不去手动给释放掉，那么它们依旧会占用一部分资源。这就导致了没有必要的资源浪费。多来几次后，可以想象下资源占用率肯定是上升的。</p>
<h2 id="vue父子通信">vue父子通信</h2>
<h3 id="tabbar案例">tabbar案例</h3>
<p>底部导航组件封装包括 <code>&lt;Tabbar&gt;</code> (父)、 <code>&lt;Item&gt;</code> (子)</p>
<p><strong>需求</strong>：<br>
点击导航组件里代表每个模块的按钮使上方展示不同模块的内容<br>
<strong>步骤</strong>：</p>
<ol>
<li>在App.vue里注册 Tabbar组件和各个页面组件,</li>
</ol>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-fallback" data-lang="fallback">&lt;script&gt;
import Tabbar from &#39;./components/comm/tabbar/Tabbar&#39;
import Home from &#39;./views/Home&#39;
import News from &#39;./views/News&#39;
import Myself from &#39;./views/Myself&#39;
export default {
  components:{
    Tabbar,
    Home,
    News,
    Myself
  }
}
&lt;/script&gt;
</code></pre></td></tr></table>
</div>
</div><ol start="2">
<li>新建Tabbar.vue和Item.vue</li>
</ol>
<p>Tabbar.vue<br>
Tabbar里注册Item组件，通过 <code>:属性名</code> 向Item组件传递需要的数据（item的下标文案txt、激活图标、未激活图标）</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span><span class="lnt">23
</span><span class="lnt">24
</span><span class="lnt">25
</span><span class="lnt">26
</span><span class="lnt">27
</span><span class="lnt">28
</span><span class="lnt">29
</span><span class="lnt">30
</span><span class="lnt">31
</span><span class="lnt">32
</span><span class="lnt">33
</span><span class="lnt">34
</span><span class="lnt">35
</span><span class="lnt">36
</span><span class="lnt">37
</span><span class="lnt">38
</span><span class="lnt">39
</span><span class="lnt">40
</span><span class="lnt">41
</span><span class="lnt">42
</span><span class="lnt">43
</span><span class="lnt">44
</span><span class="lnt">45
</span><span class="lnt">46
</span><span class="lnt">47
</span><span class="lnt">48
</span><span class="lnt">49
</span><span class="lnt">50
</span><span class="lnt">51
</span><span class="lnt">52
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-javascript" data-lang="javascript"><span class="o">&lt;</span><span class="nx">template</span><span class="o">&gt;</span>
  <span class="o">&lt;</span><span class="nx">div</span> <span class="kr">class</span><span class="o">=</span><span class="s2">&#34;tabberWarp&#34;</span> <span class="o">&gt;</span>
    <span class="o">&lt;</span><span class="nx">div</span> <span class="kr">class</span><span class="o">=</span><span class="s2">&#34;warp&#34;</span><span class="o">&gt;</span>
      <span class="o">&lt;</span><span class="nx">Item</span> <span class="o">:</span><span class="nx">txt</span><span class="o">=</span><span class="s1">&#39;item.txt&#39;</span> <span class="o">:</span><span class="nx">page</span><span class="o">=</span><span class="s1">&#39;item.page&#39;</span> <span class="err">@</span><span class="nx">change</span><span class="o">=</span><span class="s1">&#39;getVal&#39;</span>
       <span class="nx">v</span><span class="o">-</span><span class="k">for</span><span class="o">=</span><span class="s1">&#39;item in tabbarDes&#39;</span> <span class="o">:</span><span class="nx">sel</span><span class="o">=</span><span class="s1">&#39;selected&#39;</span> <span class="o">:</span><span class="nx">key</span><span class="o">=</span><span class="s2">&#34;item.index&#34;</span><span class="o">&gt;</span>
        <span class="o">&lt;</span><span class="nx">img</span> <span class="o">:</span><span class="nx">src</span><span class="o">=</span><span class="s2">&#34;item.normalImg&#34;</span> <span class="nx">slot</span><span class="o">=</span><span class="s1">&#39;normalImg&#39;</span><span class="o">&gt;</span>
        <span class="o">&lt;</span><span class="nx">img</span> <span class="o">:</span><span class="nx">src</span><span class="o">=</span><span class="s2">&#34;item.activeImg&#34;</span> <span class="nx">slot</span><span class="o">=</span><span class="s1">&#39;activeImg&#39;</span><span class="o">&gt;</span>
      <span class="o">&lt;</span><span class="err">/Item&gt;</span>
    <span class="o">&lt;</span><span class="err">/div&gt;</span>
  <span class="o">&lt;</span><span class="err">/div&gt;</span>
<span class="o">&lt;</span><span class="err">/template&gt;</span>

<span class="o">&lt;</span><span class="nx">script</span> <span class="nx">type</span><span class="o">=</span><span class="s2">&#34;text/javascript&#34;</span><span class="o">&gt;</span>
  <span class="kr">import</span> <span class="nx">Item</span> <span class="nx">from</span> <span class="s1">&#39;./Item&#39;</span>
  <span class="kr">export</span> <span class="k">default</span><span class="p">{</span>
    <span class="nx">components</span><span class="o">:</span><span class="p">{</span>
      <span class="nx">Item</span>
    <span class="p">},</span>
    <span class="nx">data</span><span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
      <span class="k">return</span> <span class="p">{</span>
        <span class="nx">selected</span><span class="o">:</span> <span class="s1">&#39;&#39;</span><span class="p">,</span>
        <span class="nx">tabbarDes</span><span class="o">:</span> <span class="p">[{</span>
            <span class="nx">txt</span><span class="o">:</span> <span class="s1">&#39;主页&#39;</span><span class="p">,</span>
            <span class="nx">page</span><span class="o">:</span> <span class="s1">&#39;home&#39;</span><span class="p">,</span>
            <span class="nx">normalImg</span><span class="o">:</span> <span class="nx">require</span><span class="p">(</span><span class="s1">&#39;../../../assets/images/home.png&#39;</span><span class="p">),</span>
            <span class="nx">activeImg</span><span class="o">:</span> <span class="nx">require</span><span class="p">(</span><span class="s1">&#39;../../../assets/images/home_act.png&#39;</span><span class="p">)</span>
          <span class="p">},</span>
          <span class="p">{</span>
            <span class="nx">txt</span><span class="o">:</span> <span class="s1">&#39;新闻列表&#39;</span><span class="p">,</span>
            <span class="nx">page</span><span class="o">:</span> <span class="s1">&#39;news&#39;</span><span class="p">,</span>
            <span class="nx">normalImg</span><span class="o">:</span> <span class="nx">require</span><span class="p">(</span><span class="s1">&#39;../../../assets/images/news.png&#39;</span><span class="p">),</span>
            <span class="nx">activeImg</span><span class="o">:</span> <span class="nx">require</span><span class="p">(</span><span class="s1">&#39;../../../assets/images/news_act.png&#39;</span><span class="p">)</span>
          <span class="p">},</span>
          <span class="p">{</span>
            <span class="nx">txt</span><span class="o">:</span> <span class="s1">&#39;个人中心&#39;</span><span class="p">,</span>
            <span class="nx">page</span><span class="o">:</span> <span class="s1">&#39;myself&#39;</span><span class="p">,</span>
            <span class="nx">normalImg</span><span class="o">:</span> <span class="nx">require</span><span class="p">(</span><span class="s1">&#39;../../../assets/images/my.png&#39;</span><span class="p">),</span>
            <span class="nx">activeImg</span><span class="o">:</span> <span class="nx">require</span><span class="p">(</span><span class="s1">&#39;../../../assets/images/my_act.png&#39;</span><span class="p">)</span>
          <span class="p">}</span>
        <span class="p">]</span>
      <span class="p">}</span>
    <span class="p">},</span>
    <span class="nx">methods</span><span class="o">:</span> <span class="p">{</span>
      <span class="nx">getVal</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">res</span><span class="p">)</span> <span class="p">{</span>
        <span class="k">this</span><span class="p">.</span><span class="nx">selected</span> <span class="o">=</span> <span class="nx">res</span><span class="p">;</span>
      <span class="p">}</span>
    <span class="p">},</span>
    <span class="nx">mounted</span><span class="p">()</span> <span class="p">{</span>
      <span class="k">this</span><span class="p">.</span><span class="nx">getVal</span><span class="p">(</span><span class="s1">&#39;home&#39;</span><span class="p">)</span>
    <span class="p">}</span>
	<span class="p">}</span>
<span class="o">&lt;</span><span class="err">/script&gt;</span>
</code></pre></td></tr></table>
</div>
</div><p>Item.vue<br>
Item通过 <code>props:{}</code> 属性里来声明一个自己的属性，用来从父组件取下相应属性的值</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span><span class="lnt">23
</span><span class="lnt">24
</span><span class="lnt">25
</span><span class="lnt">26
</span><span class="lnt">27
</span><span class="lnt">28
</span><span class="lnt">29
</span><span class="lnt">30
</span><span class="lnt">31
</span><span class="lnt">32
</span><span class="lnt">33
</span><span class="lnt">34
</span><span class="lnt">35
</span><span class="lnt">36
</span><span class="lnt">37
</span><span class="lnt">38
</span><span class="lnt">39
</span><span class="lnt">40
</span><span class="lnt">41
</span><span class="lnt">42
</span><span class="lnt">43
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-javascript" data-lang="javascript"><span class="o">&lt;</span><span class="nx">template</span><span class="o">&gt;</span>
  <span class="o">&lt;</span><span class="nx">div</span> <span class="kr">class</span><span class="o">=</span><span class="s2">&#34;itemWarp&#34;</span> <span class="err">@</span><span class="nx">click</span><span class="o">=</span><span class="s1">&#39;changePage&#39;</span><span class="o">&gt;</span>
    <span class="o">&lt;</span><span class="nx">span</span> <span class="nx">v</span><span class="o">-</span><span class="nx">show</span><span class="o">=</span><span class="s1">&#39;!bol&#39;</span><span class="o">&gt;</span>
      <span class="o">&lt;</span><span class="nx">slot</span> <span class="nx">name</span><span class="o">=</span><span class="s1">&#39;normalImg&#39;</span><span class="o">&gt;&lt;</span><span class="err">/slot&gt;</span>
    <span class="o">&lt;</span><span class="err">/span&gt;</span>
    <span class="o">&lt;</span><span class="nx">span</span> <span class="nx">v</span><span class="o">-</span><span class="nx">show</span><span class="o">=</span><span class="s1">&#39;bol&#39;</span><span class="o">&gt;</span>
      <span class="o">&lt;</span><span class="nx">slot</span> <span class="nx">name</span><span class="o">=</span><span class="s1">&#39;activeImg&#39;</span><span class="o">&gt;&lt;</span><span class="err">/slot&gt;</span>
    <span class="o">&lt;</span><span class="err">/span&gt;</span>
    <span class="o">&lt;</span><span class="nx">span</span> <span class="nx">v</span><span class="o">-</span><span class="nx">text</span><span class="o">=</span><span class="s1">&#39;txt&#39;</span> <span class="o">:</span><span class="kr">class</span><span class="o">=</span><span class="s2">&#34;{act:bol}&#34;</span><span class="o">&gt;&lt;</span><span class="err">/span&gt;</span>
  <span class="o">&lt;</span><span class="err">/div&gt;</span>
<span class="o">&lt;</span><span class="err">/template&gt;</span>

<span class="o">&lt;</span><span class="nx">script</span> <span class="nx">type</span><span class="o">=</span><span class="s2">&#34;text/javascript&#34;</span><span class="o">&gt;</span>
  <span class="kr">export</span> <span class="k">default</span> <span class="p">{</span>
    <span class="nx">name</span><span class="o">:</span> <span class="s1">&#39;Item&#39;</span><span class="p">,</span>
    <span class="nx">props</span><span class="o">:</span> <span class="p">{</span>
      <span class="nx">txt</span><span class="o">:</span> <span class="p">{</span>
        <span class="nx">type</span><span class="o">:</span> <span class="nb">String</span>
      <span class="p">},</span>
      <span class="nx">page</span><span class="o">:</span> <span class="p">{</span>
        <span class="nx">type</span><span class="o">:</span> <span class="nb">String</span>
      <span class="p">},</span>
      <span class="nx">sel</span><span class="o">:</span> <span class="p">{</span>
        <span class="nx">type</span><span class="o">:</span> <span class="nb">String</span>
      <span class="p">}</span>
    <span class="p">},</span>
    <span class="nx">computed</span><span class="o">:</span> <span class="p">{</span>
      <span class="nx">bol</span><span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
        <span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">sel</span> <span class="o">==</span> <span class="k">this</span><span class="p">.</span><span class="nx">page</span><span class="p">)</span> <span class="p">{</span>
          <span class="k">return</span> <span class="kc">true</span><span class="p">;</span>
        <span class="p">}</span>
        <span class="k">return</span> <span class="kc">false</span><span class="p">;</span>
      <span class="p">}</span>
    <span class="p">},</span>
    <span class="nx">methods</span><span class="o">:</span> <span class="p">{</span>
      <span class="nx">changePage</span><span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
        <span class="c1">//点击跳转对应的页面
</span><span class="c1"></span>        <span class="k">this</span><span class="p">.</span><span class="nx">$router</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="s1">&#39;/&#39;</span> <span class="o">+</span> <span class="k">this</span><span class="p">.</span><span class="nx">page</span><span class="p">);</span>
        <span class="k">this</span><span class="p">.</span><span class="nx">$emit</span><span class="p">(</span><span class="s1">&#39;change&#39;</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">page</span><span class="p">)</span>
      <span class="p">}</span>
    <span class="p">}</span>
  <span class="p">}</span>
<span class="o">&lt;</span><span class="err">/script&gt;</span>
</code></pre></td></tr></table>
</div>
</div><ol start="3">
<li>通过点击Item来跳转路由，还有需要通过父组件Tabbar去改变其他兄弟Item的样式变化</li>
</ol>
<p>子组件通过点击事件 <code>@click='changePage'</code> 里的</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt">1
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-fallback" data-lang="fallback">this.$emit(&#39;change&#39;,this.page)
</code></pre></td></tr></table>
</div>
</div><p>告诉Tabbar去处理定义好的 <code>getVal()</code> ，<br>
改变了selected（所有子组件Item都拥有，且值相同）, 
Tabbar再通过 <code>props:{}</code> 改变selected, 
引起Item的bol属性的变化来控制样式<br>
(这里可能你认为可以在Item里控制自己样式的变化就行，但这样却不能使兄弟组件的激活样式发生改变，所以要通过父子通信)</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-fallback" data-lang="fallback">getVal:function(res){
    this.selected = res;
}
</code></pre></td></tr></table>
</div>
</div><h3 id="总结">总结</h3>
<p><code>父子组件之间的通信就是 props down, events up，   父组件通过 属性props向下传递数据给子组件，   子组件通过 事件events 给父组件发送消息。</code><br>
比如，子组件需要某个数据，就在内部定义一个prop属性，然后父组件就像给html元素指定特性值一样，把自己的data属性传递给子组件的这个属性。<br>
而当子组件内部发生了什么事情的时候，就通过自定义事件来把这个事情涉及到的数据暴露出来，供父组件处理。</p>
<h2 id="axios">axios</h2>
<h2 id="rem">rem</h2>
<p>在public文件夹的index.html页面模板里加入</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span></code></pre></td>
<td class="lntd">
<pre class="chroma"><code class="language-fallback" data-lang="fallback">&lt;script&gt;
  (function (l, e) { function g() { var a = d.getBoundingClientRect().width; e || (e = 540); a &gt; e &amp;&amp; (a = e); h.innerHTML = &#34;html{font-size:&#34; + 100 * a / l + &#34;px;}&#34; } var a = document, k = window, d = a.documentElement, b, h = document.createElement(&#34;style&#34;), f; if (b = a.querySelector(&#39;meta[name=&#34;viewport&#34;]&#39;)) b.setAttribute(&#34;content&#34;, &#34;width=device-width,initial-scale=1,maximum-scale=1.0,user-scalable=no,viewport-fit=cover&#34;); else if (b = a.createElement(&#34;meta&#34;), b.setAttribute(&#34;name&#34;, &#34;viewport&#34;), b.setAttribute(&#34;content&#34;, &#34;width=device-width,initial-scale=1,maximum-scale=1.0,user-scalable=no,viewport-fit=cover&#34;), d.firstElementChild) d.firstElementChild.appendChild(b); else { var c = a.createElement(&#34;div&#34;); c.appendChild(b); a.write(c.innerHTML); c = null } g(); d.firstElementChild ? d.firstElementChild.appendChild(h) : (c = a.createElement(&#34;div&#34;), c.appendChild(h), a.write(c.innerHTML), c = null); k.addEventListener(&#34;resize&#34;, function () { clearTimeout(f); f = setTimeout(g, 300) }, !1); k.addEventListener(&#34;pageshow&#34;, function (a) { a.persisted &amp;&amp; (clearTimeout(f), f = setTimeout(g, 300)) }, !1); &#34;complete&#34; === a.readyState ? a.body.style.fontSize = &#34;16px&#34; : a.addEventListener(&#34;DOMContentLoaded&#34;, function (b) { a.body.style.fontSize = &#34;16px&#34; }, !1) })(750, 750);
&lt;/script&gt;
</code></pre></td></tr></table>
</div>
</div><h2 id="scss">scss</h2>
<h2 id="插槽slot">插槽slot</h2>
<h2 id="vue操作dom元素">vue操作DOM元素</h2>
<h2 id="vue-router">vue-router</h2>
<h2 id="vuex">vuex</h2>
<h2 id="vue注意点">vue注意点</h2>
<h3 id="v-if和v-show区别">v-if和v-show区别</h3>
<h3 id="图片的引入">图片的引入</h3>

    </div>

    <div class="post-copyright">
  <p class="copyright-item">
    <span class="item-title">文章作者</span>
    <span class="item-content">ZzmHub</span>
  </p>
  <p class="copyright-item">
    <span class="item-title">上次更新</span>
    <span class="item-content">
        2020-06-30
        
    </span>
  </p>
  
  
</div>
<footer class="post-footer">
      <div class="post-tags">
          <a href="/zhi-blogs/tags/vue/">vue</a>
          </div>
      <nav class="post-nav">
        <a class="prev" href="/zhi-blogs/post/%E4%BB%A3%E7%A0%81%E4%BC%98%E5%8C%96/%E4%BB%A3%E7%A0%81%E9%AA%9A%E6%93%8D%E4%BD%9C/">
            <i class="iconfont icon-left"></i>
            <span class="prev-text nav-default">Js实用技巧</span>
            <span class="prev-text nav-mobile">上一篇</span>
          </a>
        <a class="next" href="/zhi-blogs/post/vue/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F%E7%9A%84%E7%90%86%E8%A7%A3/">
            <span class="next-text nav-default">设计模式的理解</span>
            <span class="next-text nav-mobile">下一篇</span>
            <i class="iconfont icon-right"></i>
          </a>
      </nav>
    </footer>
  </article>
        </div>
        

  

  

      </div>
    </main>

    <footer id="footer" class="footer">
      <div class="social-links">
      <a href="mailto:gdmec.zhi@email.com" class="iconfont icon-email" title="email"></a>
      <a href="https://github.com/zhimianhub" class="iconfont icon-github" title="github"></a>
  <a href="https://meilanziqing.gitee.io/zhi-blogs/index.xml" type="application/rss+xml" class="iconfont icon-rss" title="rss"></a>
</div>

<div class="copyright">
  <span class="power-by">
    由 <a class="hexo-link" href="https://gohugo.io">Hugo</a> 强力驱动
  </span>
  <span class="division">|</span>
  <span class="theme-info">
    主题 - 
    <a class="theme-link" href="https://github.com/olOwOlo/hugo-theme-even">Even</a>
  </span>

  

  <span class="copyright-year">
    &copy; 
    2017 - 
    2020
    <span class="heart">
      <i class="iconfont icon-heart"></i>
    </span>
    <span class="author">ZzmHub</span>
  </span>
</div>
    </footer>

    <div class="back-to-top" id="back-to-top">
      <i class="iconfont icon-up"></i>
    </div>
  </div>
  
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/slideout@1.0.1/dist/slideout.min.js" integrity="sha256-t+zJ/g8/KXIJMjSVQdnibt4dlaDxc9zXr/9oNPeWqdg=" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.1.20/dist/jquery.fancybox.min.js" integrity="sha256-XVLffZaxoWfGUEbdzuLi7pwaUJv1cecsQJQqGLe7axY=" crossorigin="anonymous"></script>



<script type="text/javascript" src="/zhi-blogs/js/main.min.d7b7ada643c9c1a983026e177f141f7363b4640d619caf01d8831a6718cd44ea.js"></script>








</body>
</html>
